<template>
	<div class="oe-menu oe-stu-menu">
		<div class="oe-menu-container">
			<Header @toggleCollapsed="toggleCollapsed" :majorBatch="majorBatch" @changeChild="changeChild"></Header>
			<div class="oe-menu-bar" :class="{ 'close-bar': collapsed }">
				<a-menu :defaultSelectedKeys="defaultKey" :defaultOpenKeys="defaultOpen" mode="inline" theme="dark" :inlineCollapsed="collapsed">
					<a-menu-item key="academicAdministrator">
						<img src="@/assets/icons/sys-manager/icon-base-data.png" alt="">
						<router-link class="oe-menu-title oe-menu-first" :to="{ name: 'academicAdministrator', params: { type: 1 } }">教务管理员</router-link>
					</a-menu-item>
					<a-menu-item key="schoolManagement">
						<img src="@/assets/icons/sys-manager/icon-school.png" alt="">
						<router-link class="oe-menu-title oe-menu-first" :to="{ name: 'schoolManagement', params: { type: 2 } }">学校管理</router-link>
					</a-menu-item>
					<a-menu-item key="menuManagement" style="padding-left:22px;">
						<img src="@/assets/icons/sys-manager/icon-menu.png" alt="">
						<router-link class="oe-menu-title oe-menu-first " :to="{ name: 'menuManagement', params: { type: 3 } }">菜单管理</router-link>
					</a-menu-item>
					<a-menu-item key="basicConfiguration" style="padding-left:22px;">
						<img src="@/assets/icons/sys-manager/icon-baseset.png" alt="">
						<router-link class="oe-menu-title oe-menu-first " :to="{ name: 'basicConfiguration', params: { type: 4 } }">基础配置</router-link>
					</a-menu-item>
					<a-menu-item key="teachersManagement" style="padding-left:22px;">
						<img src="@/assets/icons/sys-manager/icon-teacher.png" alt="">
						<router-link class="oe-menu-title oe-menu-first " :to="{ name: 'teachersManagement', params: { type: 5 } }">教师管理</router-link>
					</a-menu-item>
					<a-menu-item key="studentsManagement" style="padding-left:22px;">
						<img src="@/assets/icons/sys-manager/icon-teacher.png" alt="">
						<router-link class="oe-menu-title oe-menu-first " :to="{ name: 'studentsManagement', params: { type: 6 } }">学生管理</router-link>
					</a-menu-item>
					<a-menu-item key="testStatistics" style="padding-left:22px;">
						<img src="@/assets/icons/sys-manager/icon-statistics.png" alt="">
						<router-link class="oe-menu-title oe-menu-first " :to="{ name: 'testStatistics', params: { type: 7 } }">考试统计</router-link>
					</a-menu-item>
				</a-menu>
			</div>
			<div class="oe-menu-content" v-if="reload">
				<a-locale-provider :locale="locales.zh_CN">
					<router-view />
				</a-locale-provider>
			</div>
		</div>
	</div>
</template>

<script>
const { locales } = window.antd;
import Header from '../sys-manager/components/header.vue';
export default {
	name: 'sysManager',
	components: {
		Header,
	},
	data() {
		return {
			locales,
			// 是否展开或者关闭
			collapsed: false,
			// 用户版本
			level: 3,
			//默认的选择数组
			defaultKey: [],
			// 默认展开的item
			defaultOpen: [],
			menuList: [],
			// zhCN, //中文包
			// 路由列表
			defaultMenuList: {
				academicAdministrator: [
					{
						path: 'academicAdministrator',
						secondList: ['academicAdministrator'],
					},
				],
				schoolManagement: [
					{
						path: 'schoolManagements',
						secondList: ['schoolManagement'],
					},
				],
				menuManagement: [
					{
						path: 'menuManagement',
						secondList: ['menuManagement'],
					},
				],
				basicConfiguration: [
					{
						path: 'basicConfiguration',
						secondList: ['basicConfiguration'],
					},
				],
				teachersManagement: [
					{
						path: 'teachersManagement',
						secondList: ['teachersManagement'],
					},
				],
				studentsManagement: [
					{
						path: 'studentsManagement',
						secondList: ['studentsManagement'],
					},
				],
				testStatistics: [
					{
						path: 'testStatistics',
						secondList: ['testStatistics'],
					},
				],
				// info: [
				// 	{
				// 		path: 'stuBaseInfo',
				// 		secondList: ['stuBaseInfo'],
				// 	},
				// 	{
				// 		path: 'realName',
				// 		secondList: ['realName'],
				// 	},
				// 	{
				// 		path: 'stuUpdatePwd',
				// 		secondList: ['stuUpdatePwd'],
				// 	},
				// ],
			},
			majorBatch: true,
			isShowManager: false,
			isShowStudent: false,
			isHavaMajor: false,
			reload: true,
		};
	},
	watch: {
		$route: {
			handler(newVal) {
				console.log(newVal);
				// 维护路由高亮
				for (const key in this.defaultMenuList) {
					let flag = false;
					for (let i = 0; i < this.defaultMenuList[key].length; i++) {
						flag = this.defaultMenuList[key][i].secondList.includes(newVal.name);
						if (flag) {
							this.defaultOpen = [];
							this.defaultKey = [];
							this.defaultOpen.push(key);
							this.defaultKey.push(this.defaultMenuList[key][i].path);
							break;
						}
					}
				}
			},
			immediate: true,
		},
	},
	beforeRouteEnter(to, from, next) {
		next((vm) => {
			vm.getUserMenu();
		});
	},
	methods: {
		toggleCollapsed(val) {
			this.collapsed = val;
		},
		getUserMenu() {
			this.$http.post('/api/common/localstorage/getUserMenu').then((rst) => {
				if (rst.code == 1) {
					this.menuList = [];
					this.menuList = rst.list;
					this.isShowManager = rst.isShowManager;
					this.isShowStudent = rst.isShowStudent;
				} else {
					this.$message.error(rst.msg);
				}
			});
		},
		// 页面刷新
		changeChild(data) {
			this.reload = data;
		},
	},
};
</script>
<style lang="scss">
.oe-stu-menu {
	.ant-menu-submenu-vertical {
		padding: 0 8px !important;
	}
}
.ant-menu-inline > .ant-menu-item,
.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-vertical-left > .ant-menu-item,
.ant-menu-vertical-left > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-vertical-right > .ant-menu-item,
.ant-menu-vertical-right > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-vertical > .ant-menu-item,
.ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-sub.ant-menu-inline > .ant-menu-item,
.ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
	height: 52px;
	line-height: 52px;
}

.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected,
.ant-menu.ant-menu-dark .ant-menu-item-selected {
	position: relative;

	&::before {
		position: absolute;
		left: 0;
		top: 9px;
		content: '';
		width: 3px;
		height: 32px;
		background: #ffffff;
		border-radius: 0px 100px 100px 0px;
	}
}

.oe-menu-title {
	margin-left: 20px !important;
}
.end-custome {
	margin-left: 16px !important;
}
.base-info,
.real-name {
	padding-left: 70px !important;
}
</style>
